<template>
  <div id="safe-main-container" class="main-container">
    <div class="mc-left">
      <div class="mc-left-sub mc-left-1">
        <div class="video-container">
          <span class="line-span line-left-top"></span>
          <span class="line-span line-left-bottom"></span>
          <span class="line-span line-right-top"></span>
          <span class="line-span line-right-bottom"></span>
          <Swiper
            v-if="videoList.length > 0"
            :videos="videoList"
            ref="swiper"
          ></Swiper>
        </div>
      </div>
      <div class="mc-left-sub mc-left-2">
        <div class="sub-top">
          <h3>渗透压</h3>
        </div>
        <div class="sub-bottom">
          <!-- <div style="height: 100%" ref="osmolarityEchart"></div> -->
          <chart-block
            v-if="osmolarityOption"
            :option="osmolarityOption"
          ></chart-block>
        </div>
      </div>
      <div class="mc-left-sub mc-left-3">
        <div class="sub-top">
          <h3>地温</h3>
        </div>
        <div class="sub-bottom">
          <chart-block
            v-if="temperatureOption"
            :option="temperatureOption"
          ></chart-block>
        </div>
      </div>
      <div class="mc-left-sub mc-left-4">
        <div class="sub-top">
          <h3>告警情况</h3>
        </div>
        <div class="sub-bottom">
          <dv-scroll-board v-if="alarmConfig" :config="alarmConfig" />
        </div>
      </div>
    </div>

    <div class="mc-center">
      <Tree :ue4Viewer="ue4Viewer" :treeData="treeData"></Tree>
    </div>

    <div class="ant-modal-root" v-show="monitorModal.visible">
      <div class="ant-modal-mask"></div>
      <div class="ant-modal-wrap ant-modal-centered">
        <div class="ant-modal">
          <div class="ant-modal-content">
            <div class="ant-modal-header">
              <div class="ant-modal-title">历史数据查询</div>
            </div>
            <div class="ant-modal-body">
              <div class="search">
                <div class="datesearch">
                  <div class="dateicon"></div>
                  <a-range-picker
                    @change="onMonitordateChange"
                    allowClear
                    :placeholder="['开始日期', '结束日期']"
                    size="small"
                    v-model="monitorModal.searchDate"
                  >
                  </a-range-picker>
                  <div class="datebutton" @click="searchHistoryData">查询</div>
                </div>
              </div>
              <div class="table">
                <dv-scroll-board
                  style="width: 570px; height: 182px"
                  v-if="monitorModal.tableConfig"
                  :config="monitorModal.tableConfig"
                />
              </div>
            </div>
          </div>
          <div class="modal-close" @click="closeModal"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import osmolaritydatas from "@/datas/osmolarity.json";
import temperaturedatas from "@/datas/temperature.json";
import alarmdatas from "@/datas/alarm.json";
import historydatas from "@/datas/alarm-history.json";
import ChartBlock from "@components/ChartBlock";
import Swiper from "@components/VideoSwiper/Index.vue";
import ModelTree from "@components/ModelTree/Index.vue";
import modeldatas from "@/datas/safe-model.json";
export default {
  name: "SafeMonitor",
  components: {
    ChartBlock: ChartBlock,
    Swiper: Swiper,
    Tree: ModelTree
  },
  data() {
    let baseUrl = window.location.origin;
    return {
      //树节点
      treeData: [],
      //视频图片
      imageList: [
        baseUrl + "/static/images/certify01.png",
        baseUrl + "/static/images/certify02.png",
        baseUrl + "/static/images/certify03.png",
        baseUrl + "/static/images/certify04.png",
        baseUrl + "/static/images/certify05.png"
      ],
      //监测图片
      videoList: [
        {
          icon: baseUrl + "/static/images/certify01.png",
          video: baseUrl + "/static/videos/1.mp4"
        },
        {
          icon: baseUrl + "/static/images/certify02.png",
          video: baseUrl + "/static/videos/2.mp4"
        }
      ],
      //渗透压图标配置
      osmolarityOption: null,
      //地温图标配置
      temperatureOption: null,
      //渗透压数据源
      odata: {
        data1: [],
        data2: []
      },
      //地温数据源
      tdata: {
        data1: [],
        data2: []
      },
      // 监测点数据
      monitorPoints: [
        {
          id: "mark_point1",
          state: "normal",
          title: "1#监测点",
          time: "2022-10-10 12:32:09",
          monitor: {
            osmolarity: "23Pa",
            temperature: "10℃"
          },
          location: {
            x: -1973.62060546875,
            y: 989.162841796875,
            z: 4666.63623046875
          }
        },
        {
          id: "mark_point2",
          state: "unnormal",
          title: "2#监测点",
          time: "2022-10-10 12:32:09",
          monitor: {
            osmolarity: "26Pa",
            temperature: "12℃"
          },
          location: {
            x: -10129.9736328125,
            y: 1691.3311767578125,
            z: 5726.79345703125
          }
        }
      ],
      //已经显示laebl的id列表
      showLabelIds: [],
      //告警信息
      alarmConfig: null,
      //监测数据弹窗
      monitorModal: {
        visible: false,
        tableConfig: null,
        searchDate: null
      },
      //轮播表的配置
      boardConfig: {
        // rowNum: 4,
        // headerHeight: 30,
        headerBGC: "rgba(31,248,230,0.2)",
        oddRowBGC: "rgba(31,248,230,0.05)",
        evenRowBGC: "rgba(31,248,230,0.1)"
      }
    };
  },
  methods: {
    //获取时间
    timestampToTime(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var h = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var m =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + " " + h + ":" + m + ":" + s;
    },

    //页面的默认加载事件
    initPage() {
      //添加监测点
      this.addMarkLabel();
      this.addMonitorLabel();
      setTimeout(() => {
        //初始化渗透压配置
        this.initOsmolarityOption();
        //初始化地温配置
        this.initTemperatureOption();
        //初始化告警信息
        this.initAlarm();
        //加载树数据
        this.loadTreeData();
      }, 0);

      //轮播初始化
      this.$refs.swiper.init();

      if (this.ue4Viewer && Object.keys(this.ue4Viewer).length != 0) {
        this.addLabelEvent();
      }
      // let datas = [];
      // var d = new Date("2019/06/01").getTime();
      // for (let i = 0; i < 1000; i++) {
      //   d = d + 1000 * 60 * 30;
      //   let data = {
      //     time: this.timestampToTime(d),
      //     pointname: ((i + 1) % 5) + 1 + "#监测点",
      //     state: parseInt(Math.random() * 6) % 2 == 0 ? "正常" : "异常",
      //     temperature: 16.3,
      //     osmolarity: 20.3,
      //   };
      //   //语法: Math.random() * m + n
      //   data.temperature = parseFloat((Math.random() * 15 + 5).toFixed(2));
      //   data.osmolarity = parseFloat((Math.random() * 20 + 5).toFixed(2));
      //   datas.push(data);
      // }
      // console.log(JSON.stringify(datas));
    },
    //初始化渗透压数据
    initOsmolarityOption() {
      let legendData = ["1#监测点", "2#监测点"];
      let option = {
        title: {
          // text: "Stacked Line",
          show: false
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          show: false,
          data: legendData,
          // top: "4%",
          textStyle: {
            color: "#FDFDFC"
          }
        },
        grid: {
          left: 15,
          right: 6,
          top: 35,
          bottom: 10,
          containLabel: true
        },
        toolbox: {
          feature: {
            // saveAsImage: {},
          }
        },
        dataZoom: {
          type: "inside"
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
          axisLine: {
            // x轴样式
            lineStyle: {
              color: "#99A0A8"
            }
          },
          axisLabel: {
            color: "#99A0A8",
            formatter: function(value) {
              let labels = value.split(" ");
              if (labels.length > 0) {
                return labels.join("\n");
              } else value;
            }
          }
        },
        yAxis: {
          type: "value",
          name: "单位（Pa）",
          // offset: -20,
          nameTextStyle: {
            color: "#C2C8D0",
            nameLocation: "start"
          },
          axisLabel: {
            color: "#99A0A8"
          },
          //分隔线
          splitLine: {
            show: true,
            lineStyle: {
              // type: "dotted",
              color: "#99A0A8"
            }
          }
        },
        series: [
          {
            name: legendData[0],
            type: "line",
            smooth: true, //变为曲线 默认false折线
            symbolSize: 0, //去掉页面上显示的圆点
            data: []
          },
          {
            name: legendData[1],
            type: "line",
            smooth: true, //变为曲线 默认false折线
            symbolSize: 0, //去掉页面上显示的圆点
            data: []
          }
        ]
      };

      let xAxisData = [];
      let downData = [];
      let downData1 = [];
      for (let i = 0; i < osmolaritydatas.rows.length; i++) {
        const row = osmolaritydatas.rows[i];
        xAxisData.push(row.TM);
        if (row.Z) {
          downData.push(parseFloat(row.Z));
          downData1.push(parseFloat(row.Q));
        } else {
          downData.push(null);
          downData1.push(null);
        }
        if (i >= 1000) {
          break;
        }
      }

      //处理y轴最大、最小值
      let max1 = Math.max(...downData);
      let min1 = Math.min(...downData);

      let max = Math.ceil(max1 * 1.1 * 100) / 100;
      let min = Math.floor(min1 * 0.9 * 100) / 100;
      console.log(option, max1, min1, max, min);

      // option.yAxis.min = min;
      // option.yAxis.max = max;
      option.xAxis.data = xAxisData;
      this.odata.data1 = downData;
      this.odata.data2 = downData1;
      option.series[0].data = downData;
      option.series[1].data = downData1;

      this.osmolarityOption = option;

      // const chart = this.$refs.osmolarityEchart;
      // if (chart) {
      //   const myChart = echarts.init(chart);
      //   myChart.setOption(option);
      //   window.addEventListener("resize", function () {
      //     myChart.resize();
      //   });
      //   this.$on("hook:destroyed", () => {
      //     window.removeEventListener("resize", function () {
      //       myChart.resize();
      //     });
      //   });
      // }
    },
    //初始化地温配置
    initTemperatureOption() {
      let legendData = ["1#监测点", "2#监测点"];
      let option = {
        title: {
          // text: "Stacked Line",
          show: false
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          show: false,
          data: legendData,
          // top: "4%",
          textStyle: {
            color: "#FDFDFC"
          }
        },
        grid: {
          left: 15,
          right: 6,
          top: 35,
          bottom: 10,
          containLabel: true
        },
        toolbox: {
          feature: {
            // saveAsImage: {},
          }
        },
        dataZoom: {
          type: "inside"
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
          axisLine: {
            // x轴样式
            lineStyle: {
              color: "#99A0A8"
            }
          },
          axisLabel: {
            color: "#99A0A8",
            formatter: function(value) {
              let labels = value.split(" ");
              if (labels.length > 0) {
                return labels.join("\n");
              } else value;
            }
          }
        },
        yAxis: {
          type: "value",
          name: "单位（℃）",
          // offset: -20,
          nameTextStyle: {
            color: "#C2C8D0",
            nameLocation: "start"
          },
          axisLabel: {
            color: "#99A0A8"
          },
          //分隔线
          splitLine: {
            show: true,
            lineStyle: {
              // type: "dotted",
              color: "#99A0A8"
            }
          }
        },
        series: [
          {
            name: legendData[0],
            type: "line",
            smooth: true, //变为曲线 默认false折线
            symbolSize: 0, //去掉页面上显示的圆点
            data: []
          },
          {
            name: legendData[1],
            type: "line",
            smooth: true, //变为曲线 默认false折线
            symbolSize: 0, //去掉页面上显示的圆点
            data: []
          }
        ]
      };

      let xAxisData = [];
      let downData = [];
      let downData1 = [];
      for (let i = 0; i < temperaturedatas.rows.length; i++) {
        const row = temperaturedatas.rows[i];
        xAxisData.push(row.TM);
        if (row.Z) {
          downData.push(parseFloat(row.Z));
          downData1.push(parseFloat(row.Q));
        } else {
          downData.push(null);
          downData1.push(null);
        }
        if (i >= 1000) {
          break;
        }
      }

      //处理y轴最大、最小值
      let max1 = Math.max(...downData);
      let min1 = Math.min(...downData);

      let max = Math.ceil(max1 * 1.1 * 100) / 100;
      let min = Math.floor(min1 * 0.9 * 100) / 100;
      console.log(option, max1, min1, max, min);

      // option.yAxis.min = min;
      // option.yAxis.max = max;
      option.xAxis.data = xAxisData;
      this.tdata.data1 = downData;
      this.tdata.data2 = downData1;
      option.series[0].data = downData;
      option.series[1].data = downData1;

      this.temperatureOption = option;
    },
    //初始化告警信息
    initAlarm() {
      let data = [];
      for (let i = 0; i < alarmdatas.rows.length; i++) {
        const row = alarmdatas.rows[i];
        data.push([row.time, row.events, row.content]);
      }
      let config = {
        rowNum: 4,
        headerHeight: 30,
        columnWidth: [150, 80],
        header: ["时间", "事件", "内容"],
        data: data
      };
      this.alarmConfig = Object.assign(this.boardConfig, config);
    },
    //标签点击事件
    addLabelEvent() {
      this.ue4Viewer.addLabelEvent(e => {
        console.log("labelEvent", e);
        //打开小标签窗口
        if (e.type === 0) {
          if (e.id == "mark_point1") {
            this.temperatureOption.series[0].data = this.tdata.data1;
            this.temperatureOption.series[1].data = [];
            this.osmolarityOption.series[0].data = this.odata.data1;
            this.osmolarityOption.series[1].data = [];
          }
          if (e.id == "mark_point2") {
            this.temperatureOption.series[0].data = [];
            this.temperatureOption.series[1].data = this.tdata.data2;
            this.osmolarityOption.series[0].data = [];
            this.osmolarityOption.series[1].data = this.odata.data2;
          }
          this.addMonitorLabel(e.id);
        }
        //打开历史数据弹窗
        if (e.type === 1) {
          this.initTableConfig();
          this.monitorModal.visible = true;
        }
      });
    },
    // 新增标签
    addMarkLabel() {
      let param = {
        type: "mark",
        scale: 1,
        offset: { x: 0, y: 0 },
        clickable: true,
        config: []
      };

      let points = this.monitorPoints;
      let config = [];
      for (let i = 0; i < points.length; i++) {
        const point = points[i];

        if (point.location && Object.keys(point.location).length > 0) {
          let p = {
            id: point.id,
            title: point.title,
            location: point.location,
            icon: point.state === "normal" ? "mark3" : "mark2"
            // value: "9999",
            // valueColor: "#ff0000cc",
          };
          config.push(p);
        } else if (point.objectid) {
          let p = {
            id: point.id,
            title: point.title,
            objectid: point.objectid,
            icon: point.state === "normal" ? "mark3" : "mark2"
          };
          config.push(p);
        }
      }
      if (config.length > 0) {
        param.config = config;
        if (this.ue4Viewer && Object.keys(this.ue4Viewer).length != 0) {
          this.ue4Viewer.addUpdateLabel(param);
        }
      }
    },
    // 新增标签
    addMonitorLabel(labelid) {
      let param = {
        type: "monitor",
        scale: 1,
        offset: { x: 30, y: 0 },
        config: [
          {
            id: "monitor1",
            clickable: true,
            // objectid: "S_ZSMC_24",
            title: "2#监测点",
            state: "警告",
            time: "2022-11-11 14:17:39",
            pressure: "99.99",
            temp: "36.85℃"
          }
        ]
      };

      let points = this.monitorPoints;
      let config = [];
      for (let i = 0; i < points.length; i++) {
        const point = points[i];
        if (point.id === labelid) {
          if (point.location && Object.keys(point.location).length > 0) {
            let p = {
              id: "monitor_" + point.id,
              clickable: true,
              title: point.title,
              state: point.state === "normal" ? "正常" : "警告",
              time: point.time,
              pressure: point.monitor.osmolarity,
              temp: point.monitor.temperature,
              location: point.location
            };
            config.push(p);
          } else if (point.objectid) {
            let p = {
              id: "monitor_" + point.id,
              clickable: true,
              title: point.title,
              state: point.state === "normal" ? "正常" : "警告",
              time: point.time,
              pressure: point.monitor.osmolarity,
              temp: point.monitor.temperature,
              objectid: point.objectid
            };
            config.push(p);
          }
          break;
        }
      }

      //已经显示的标签，进行隐藏
      if (this.showLabelIds.includes(labelid)) {
        this.ue4Viewer.removeAllMark(config.map(x => x.id).join(","));

        let arr = this.showLabelIds;
        for (let i = arr.length - 1; i >= 0; i--) {
          if (arr[i] == labelid) {
            arr.splice(i, 1);
            break;
          }
        }
        this.showLabelIds = arr;
        return;
      }

      if (config.length > 0) {
        param.config = config;
        this.ue4Viewer.addUpdateLabel(param);
        this.showLabelIds.push(labelid);
      }
    },
    //视频点击事件
    videoClick() {
      console.log("videoClick");
    },
    //查询监测历史数据
    onMonitordateChange(date, dateString) {
      console.log(date, dateString);
    },
    //关闭弹窗
    closeModal() {
      this.monitorModal.visible = false;
    },
    //初始化弹窗monitorModal.tableConfig
    initTableConfig() {
      let data = [];
      for (let i = 0; i < historydatas.rows.length; i++) {
        const row = historydatas.rows[i];
        data.push([
          row.pointname,
          row.state,
          row.time,
          row.temperature,
          row.osmolarity
        ]);
      }
      let tableConfig = {
        // rowNum: 4,
        // headerHeight: 30,
        header: ["监测点", "监测状态", "时间", "渗透压", "地温"],
        data: data,
        columnWidth: [100, 100, 160, 100]
      };
      this.monitorModal.tableConfig = Object.assign(
        this.boardConfig,
        tableConfig
      );
      console.log(this.monitorModal.tableConfig);
      // this.monitorModal.visible = true;
    },
    //查询相关历史数据
    searchHistoryData() {
      // console.log(
      //   this.monitorModal.searchDate,
      //   this.monitorModal.searchDate[0].format("YYYY-MM-DD HH:mm:ss")
      // );
      if (
        !this.monitorModal.searchDate ||
        this.monitorModal.searchDate.length != 2
      ) {
        return;
      }
      let starttime = this.monitorModal.searchDate[0].format(
        "YYYY-MM-DD HH:mm:ss"
      );
      let endtime = this.monitorModal.searchDate[1].format(
        "YYYY-MM-DD HH:mm:ss"
      );
      let data = [];
      for (let i = 0; i < historydatas.rows.length; i++) {
        const row = historydatas.rows[i];
        if (row.time >= starttime && row.time <= endtime) {
          data.push([
            row.pointname,
            row.state,
            row.time,
            row.temperature,
            row.osmolarity
          ]);
        }
      }
      let tableConfig = {
        header: ["监测点", "监测状态", "时间", "渗透压", "地温"],
        data: data,
        columnWidth: [100, 100, 160, 100]
      };
      this.monitorModal.tableConfig = Object.assign(
        this.boardConfig,
        tableConfig
      );
    },
    //初始化树节点的数据
    loadTreeData() {
      this.loading = true;
      let params = {};

      let res = modeldatas;
      if (res.success) {
        this.treeData = res.result;
      } else {
        this.$message.warning(res.message);
      }
    }
  },
  mounted() {},
  created() {},
  props: {
    ue4Viewer: {
      type: Object,
      default: () => {
        return {};
      }
    }
  }
};
</script>

<style lang="less" scoped>
#safe-main-container {
  .mc-left {
    visibility: visible;
    width: 476px;
    height: 100%;
    padding-top: 15px;

    .mc-left-sub {
      // height: 224px;
      // height: calc(25% - 20px);
      height: 25%;
      width: calc(100% - 20px);
      // margin-top: 25px;
      // margin-top: 2.5304%;
      margin-left: 20px;
      padding-bottom: 20px;

      .sub-top {
        height: 46px;
        background-image: url(../../assets/svg/BlockBg.svg);
        background-position: top center;
        background-repeat: no-repeat;
        background-size: cover;

        h3 {
          color: #fff;
          margin: 0;
          padding-left: 40px;
          padding-top: 8px;
          font-weight: normal;
          text-align: left;
        }
      }

      .sub-bottom {
        background-image: url(../../assets/svg/BlockBg.svg);
        background-position: bottom center;
        background-repeat: no-repeat;
        background-size: cover;
        height: calc(100% - 46px);
      }
    }

    .mc-left-1 {
      // margin-top: 15px;
      margin-top: 0px;
      margin-left: 20px;

      .video-container {
        height: 100%;
        width: 100%;
        border: 1px solid #034760;
        background-color: rgba(2, 20, 48, 0.8);
        border-radius: 2px;
        position: relative;

        .video-div {
          height: calc(100% - 30px);

          img {
            width: 100px;
            height: 100px;
          }
        }

        .line-span {
          width: 22px;
          height: 22px;
          border: 1px solid #1ff8e6;
          position: absolute;
          display: inline-block;
        }

        .line-left-top {
          left: -1px;
          top: -1px;
          border-right: none;
          border-bottom: none;
        }

        .line-left-bottom {
          left: -1px;
          bottom: -1px;
          border-right: none;
          border-top: none;
        }

        .line-right-top {
          right: -1px;
          top: -1px;
          border-left: none;
          border-bottom: none;
        }

        .line-right-bottom {
          right: -1px;
          bottom: -1px;
          border-left: none;
          border-top: none;
        }
      }
    }

    .mc-left-4 {
      .sub-bottom {
        .dv-scroll-board {
          margin-left: 30px;
          height: calc(100% - 20px);
          width: calc(100% - 50px);
        }
      }
    }
  }

  .mc-center {
    // visibility: visible;
    width: 300px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 25px;
    max-height: 100%;
  }

  .ant-modal-root {
    .ant-modal-mask {
      visibility: visible;
    }

    .ant-modal-wrap {
      visibility: visible;

      .ant-modal {
        width: 600px;
        height: 288px;
        padding-bottom: 0px;
      }

      .ant-modal-content {
        height: 100%;
        width: 100%;
        background-image: url(../../assets/svg/diaBg04.svg);
        background-position: top center;
        background-repeat: no-repeat;
        background-size: contain;
        background-color: #fff0;

        .ant-modal-header {
          background: none;
          border: none;
          height: 34px;
          text-indent: 15px;
          padding-top: 7px;

          .ant-modal-title {
            color: #ffffff;
            font-size: 20px;
            margin-top: 4px;
          }
        }

        .ant-modal-body {
          padding: 0px;
          height: calc(100% - 34px);

          .search {
            height: 35px;

            .datesearch {
              width: 270px;
              height: 28px;
              margin-top: 20px;
              margin-left: 154px;
              border-radius: 28px;
              border: 1px solid #1ff8e6;
              display: flex;

              .dateicon {
                background-image: url(../../assets/svg/Calendar.svg);
                background-position: top center;
                background-repeat: no-repeat;
                background-size: contain;
                width: 12px;
                height: 12px;
                margin-top: 7px;
                margin-left: 10px;
              }

              .ant-calendar-picker {
                width: calc(100% - 62px);
              }

              .datebutton {
                background-color: #1ff8e6;
                height: 100%;
                width: 50px;
                border-top-right-radius: 26px;
                border-bottom-right-radius: 26px;
                text-align: center;
                line-height: 26px;
                cursor: pointer;
                pointer-events: all;
              }
            }
          }

          .table {
            width: calc(100% - 30px);
            height: calc(100% - 72px);
            margin-left: 20px;

            .dv-scroll-board {
              width: 100%;
            }
          }
        }
      }

      .modal-close {
        width: 25px;
        height: 25px;
        background-image: url(../../assets/svg/Close.svg);
        background-position: top center;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
        pointer-events: all;
      }
    }
  }
}
</style>
<style lang="less">
#safe-main-container {
  .search {
    .ant-calendar-picker {
      margin-top: 3px;
      width: 200px;

      .ant-input {
        background-color: #fff0;
        border: none;
      }

      .ant-calendar-picker-clear {
        background-color: #fff0;
        color: #fff;
        margin-left: 2px;
        right: 5px;
      }
    }
  }
}
</style>
